<template>
<div class="news">
  <div>
    <div style="float:left">
      <el-button size='small' @click='addhandler'>新增</el-button>
      </div>
   
     <div style="float:right">
       <el-form size='small' :inline="true"  class="demo-form-inline">
            <el-form-item >
                <el-input v-model="params.title" placeholder="请输入标题"></el-input>
            </el-form-item>
           <el-form-item >
            <el-select v-model="params.categoryId" placeholder="请输入所属栏目" clearable>
              <el-option :label="item.name " :value="item.id" v-for="item in categories" :key='item.id'></el-option>
          
            </el-select>
          </el-form-item>
          
        </el-form>
     </div>
  </div>
      <!-- 表格 -->
       <el-table size='small'
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="序号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="title"
        label="新闻标题">
      </el-table-column>
      <el-table-column
        prop="category.name"
        label="新闻分类"
        width="200">
      </el-table-column>
    
    <el-table-column
        prop="publishTime"
        label="发布时间" 
         width="200">
      </el-table-column>
      <el-table-column
        prop="readTimes"
        label="阅读次数"
         width="200">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="80">
      </el-table-column>
      <el-table-column
        prop="thumpUp"
        label="点赞次数"
        width="80">
      </el-table-column>
      <el-table-column
        label="操作"
        width='80'>
        <template v-slot='scope'>
          <span @click='toDelete(scope.row)' >删除</span>
          <span @click='toEdit(scope.row)'>修改</span>

        </template>
      </el-table-column>
    </el-table>
        
    

    <!-- 分页-->
     <el-pagination
      :page-size='params.pageSize'
      :current-page='params.page'
      layout="prev, pager, next"
      @current-change='pageChange'
      :total="total">
      </el-pagination>

    <!-- 模态框 -->
         <el-dialog title="发布新闻资讯" :visible.sync="dialogFormVisible" width='80%'>
            <el-form>
                <el-form-item label="新闻标题" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属分类" :label-width="formLabelWidth">
                    <el-select v-model="form.categoryId" placeholder="请选择所属分类">
                        <el-option v-for='item in categories' :key='item.id' :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="新闻内容" :label-width="formLabelWidth">
                    <Tinymce v-model="form.content" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveNews">确 定</el-button>
            </div>
        </el-dialog>

</div>
   
</template>

<script>
import Tinymce from'@/components/Tinymce'
import axios from '@/http/axios'
import qs from 'qs'
export default {
  components:{
    Tinymce
  },
    data(){
        return{
            params:{
              page:1,
              pageSize:5
            },
            tableData:[],
            form:{},
            formLabelWidth:'120px',
            dialogFormVisible:false,
            categories:[],
            total:0
        }
    },
    
    watch:{
      params:{
        handler:function(){
          this.queryNews()
        },
        deep:true
      }
    },
     created(){
          this.queryNews()
          this.findAllCategory()
    },
    methods:{
      toDelete(item){
        
        
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let obj={
          id:item.id
        }
        axios({
          url:'http://121.199.29.84:8001/article/deleteById',
          method:'get',
          params:obj,

        }).then((res)=>{
          this.$notify({
            title:'成功',
            massage:res.data.message,
            type:'success'
          });
          this.queryNews()

        })
          
        }).catch(() => {
          this.$notify({
            type: '成功',
            message: '取消成功',
            type:'success'
          });          
        });
      },
        
      // 修改
      toEdit(item){
        // 显示模态框
        this.dialogFormVisible=true;
        // 将当前行数数据放入模态框
        this.form=JSON.parse(JSON.stringify(item))
        // 引入数据类型的传递
        // 值传递和引用传递
      },
      saveNews(){
        
        axios({
          url:'http://121.199.29.84:8001/article/saveOrUpdate',
          method:'post',
          data:qs.stringify(this.form),
          contentType:'application/x-www-form-urlencoded'
          
        }).then((res)=>{
          this.$notify({
            title:'成功',
            message:res.data.message,
            type:'success'
          });
          this.queryNews()
        })
        this.dialogFormVisible=false;
      },

      addhandler(){
        this.dialogFormVisible=true
        this.form={}
      },
      // 查询所有栏目
      findAllCategory(){
        axios({
          url:'http://121.199.29.84:8001/category/findAll',
          method:'get',

        }).then((res=>{
          this.categories=res.data.data
        }))
      },
      // 分页页码改变
      pageChange(page){
        // console.log(page)
        this.params.page=page
      },
      queryNews(){
        axios({
          url:'http://121.199.29.84:8001/article/pageQuery',
          method:'get',
          params:this.params,
        }).then((res)=>{
          // console.log(res.data)
          this.tableData=res.data.data.list
          this.total=res.data.data.total
        })
      },
      
  },
  
    
    
}
</script>